<!--月考勤详情，某人一月的考勤情况-->
<template>
  <div class="list-container">
    <!-- 月考勤详情 -->
    <el-form class="search-panel" v-model="searchData" :inline="true">
      <!-- <el-form-item
        label-width="120px"
        class="search-time"
        label="出勤时间："
        prop="time"
      >
        <el-date-picker
          style="width: 100%"
          v-model="sercchData.startToEnd"
          type="daterange"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item> -->
      <el-form-item label="出勤时间：">
        <el-date-picker
          style="width: 220px"
          v-model="searchData.date"
          type="month"
          placeholder="选择日期"
          value-format="yyyy-MM"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="table-panel">
      <el-row class="table-operate" style="display:flex">
        <!-- <el-page-header
          style="line-height: 40px; margin-right: 20px"
          @back="goBack"
          content="劳务公司1/班组1/张珊"
        >
        </el-page-header> -->
        <el-breadcrumb style="display:inline-block;margin-right:30px;line-height:50px;font-size: 16px;font-weight: 600;" separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>{{personInfo.serviceCorporationName}}</el-breadcrumb-item>
          <el-breadcrumb-item>{{personInfo.teamName}}</el-breadcrumb-item>
          <el-breadcrumb-item>{{personInfo.personName}}</el-breadcrumb-item>
        </el-breadcrumb>
        <el-button style="margin-left:15px" type="primary" icon="el-icon-plus" @click="addAttendance">
          新增考勤
        </el-button>
      </el-row>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column align="center" type="index" width="55" label="序号">
        </el-table-column>
        <el-table-column align="center" label="出勤日期">
          <template slot-scope="scope">
            <div>{{ scope.row.date }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="出勤时间" prop="time">
          <template slot-scope="scope">
            <div>{{ scope.row.time == null ? "——" : scope.row.time }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="合计">
          <template slot-scope="scope">
            <div>
              {{ scope.row.totalTime == null ? "0" : scope.row.totalTime }}小时
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="mode" label="结算">
          <template slot-scope="scope">
            <div v-if="scope.row.mode == 1">打卡机获取</div>
            <div v-else-if="scope.row.mode == 2">人工导入</div>
            <div v-else-if="scope.row.mode == 3">人工+打卡机获取</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作时间" min-width="100">
          <template slot-scope="scope">
            <div>
              {{ scope.row.updateTime == null ? "——" : scope.row.updateTime }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="100">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="checkRow(scope)"
              type="text"
              icon="el-icon-edit"
              :disabled="scope.row.time == null"
              >调整</el-button
            >
            <el-button
              @click.native.prevent="deleteRow(scope.row)"
              type="text"
              icon="el-icon-delete"
              :disabled="scope.row.time == null"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-row class="page">
        <div class="page-tag">
          共{{ Math.ceil(totalData / searchData.pageSize) }}页/{{
            totalData
          }}条数据
        </div>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="searchData.currentPage"
          :page-sizes="[10, 20, 50]"
          :page-size="searchData.pageSize"
          layout="sizes, prev, pager, next, jumper"
          :total="totalData"
        >
          >
        </el-pagination>
      </el-row>
    </div>
    <!-- 调整弹窗 -->
    <el-dialog
      class="small-dialog"
      width="600px"
      title="调整考勤"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="dialogForm" :inline="true" style="text-align: center;">
        <el-form-item label="考勤开始时间：" prop="startTime">
          <el-time-picker
            v-model="dialogForm.startTime"
            type="datetime"
            placeholder="选择开始时间"
            value-format="HH:mm"
          >
          </el-time-picker>
        </el-form-item>
        <el-form-item label="考勤结束时间：" prop="endTime">
          <el-time-picker
            v-model="dialogForm.endTime"
            type="datetime"
            placeholder="选择结束时间"
            format="HH:mm:ss"
            value-format="HH:mm"
          >
          </el-time-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmDialog">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getMonthAttendanceDetails,
  deleteDayAttendances,
  updateAttendance,
} from "@/api/attendance.js";
export default {
  data() {
    return {
      searchData: {
        // startToEnd: null,
        date: null,
        id: null,
        currentPage: 1,
        pageSize: 10,
      },
      tableData: [
        {
          date: "2020/01/01",
          startTime: "2021-01-01 09:00",
          endTime: "2020-01-01 18:00",
          count: 8,
          mode: "张三",
          operateTime: "2020/11/22 23:59",
        },
        {
          date: "2020/01/01",
          startTime: "2021-01-01 09:00",
          endTime: "2020-01-01 18:00",
          count: 8,
          mode: "张三",
          operateTime: "2020/11/22 23:59",
        },
        {
          date: "2020/01/01",
          startTime: "2021-01-01 09:00",
          endTime: "2020-01-01 18:00",
          count: 8,
          mode: "张三",
          operateTime: "2020/11/22 23:59",
        },
        {
          date: "2020/01/01",
          startTime: "2021-01-01 09:00",
          endTime: "2020-01-01 18:00",
          count: 8,
          mode: "张三",
          operateTime: "2020/11/22 23:59",
        },
        {
          date: "2020/01/01",
          startTime: "2021-01-01 09:00",
          endTime: "2020-01-01 18:00",
          count: 8,
          mode: "张三",
          operateTime: "2020/11/22 23:59",
        },
      ],
      totalData: 0,
      dialogFormVisible: false,
      dialogForm: {
        startTime: "19:00",
        endTime: "19:00",
      },
      modeOptions: [
        { value: 0, label: "按天" },
        { value: 1, label: "按小时" },
      ],
      index: null,
      personInfo: null,
    };
  },
  created() {
    // console.log(this.$route.query.personId)
    const data = this.$route.query;
    // if(this.$route.query!=null){
    this.personInfo = data.personInfo
    this.searchData.id = data.personInfo.personId;
    this.searchData.date = data.date;
    this.getList();
    // }
  },
  methods: {
    onSubmit() {
      // console.log(this.searchData)
      this.getList();
    },
    //   新增考勤
    addAttendance() {
      this.$router.push({ path: "/attendance/daily/add" });
    },
    getList() {
      getMonthAttendanceDetails(this.searchData).then((res) => {
        console.log(res);
        this.tableData = res.data.data.records;
        this.totalData = res.data.data.total;
      });
    },
    checkRow(data) {
      this.dialogForm = {
        startTime: data.row.time.substr(0, 5),
        endTime: data.row.time.substr(6, 10)=="--"?new Date() : data.row.time.substr(6, 10),
      };
      // console.log(this.dialogForm);
      // this.dialogForm.startTime = data.row.time.substr(0,5);
      // this.dialogForm.endTime = data.row.time.substr(6,10);
      // this.personInfo.per = data.row.personId;
      this.index = data.$index;
      this.dialogFormVisible = true;
    },
    deleteRow(res) {
      this.$confirm(
        "是否确认删除 " + this.personInfo.personName + " " + res.date + " 的考勤?",
        "日考勤删除",
        {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          deleteDayAttendances({
            date: res.date,
            personId: res.personId,
          }).then((e) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getList()
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //   页面大小
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    //   当前页面
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },
    // 弹窗确认
    confirmDialog() {
      // 修改当前考勤详情
      // this.tableData[this.index].startTime = this.dialogForm.startTime;
      // this.tableData[this.index].endTime = this.dialogForm.endTime;
      updateAttendance({
        personId: this.personInfo.personId,
        eventEndTime:
          this.tableData[this.index].date +
          " " +
          this.dialogForm.endTime +
          ":00",
        eventStartTime:
          this.tableData[this.index].date +
          " " +
          this.dialogForm.startTime +
          ":00",
      }).then((res) => {
        console.log(res);
        this.$message({
          type: "success",
          message: "修改成功！",
        });
        this.getList();
        this.dialogFormVisible = false;
      });
    },
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" >
.row {
  display: flex;
  flex-direction: row;
}
</style>
